<template>
    <div class="couponsbagadd">
        <div class="outmain ba_f heighthv pad_20 bor_rad5">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>创建瓜分红包活动</span>
                </div>
            </div>
            <div class="mar_t20 flex-bet flex-y-top">
                <div class="flex-g-1">
                    <el-form ref="form" :model="form" label-width="180px">
                        <el-form-item label="活动名称" :required='true' prop="name">
                            <el-input v-model="form.name" placeholder="请输入活动名称"></el-input>
                        </el-form-item>
                        <el-form-item label="活动时间" :required='true'>
                            <el-date-picker
                                    v-model="timeData"
                                    type="datetimerange"
                                    align="right"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :default-time="['00:00:00', '23:59:59']">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="发券位置" :required='true'>
                            <el-radio-group v-model="location">
                                <el-radio label="1">外卖点单页</el-radio>
                            </el-radio-group>
                        </el-form-item>
                      <el-form-item label="红包名称" :required='true' prop="couponName">
                        <el-input v-model="form.couponName" placeholder="请输入红包名称"></el-input>
                      </el-form-item>
                      <el-form-item label="红包有效期" :required='true'>
                        <el-date-picker
                            v-model="timeData2"
                            type="datetimerange"
                            align="right"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['08:00:00', '23:59:59']">
                        </el-date-picker>
                      </el-form-item>
                        <el-form-item label="创建手气红包" :required='true' prop="orFullMoney">
                            <div class="">
                              <div class="flex">
                                <div class="mar_t30">非手气用户</div>
                                <div class="mar_l20">
                                  <div>使用门槛（订单满）</div>
                                  <div class="cusipw">
                                    <el-input v-model="form.orFullMoney" :min="0.01" placeholder="请输入金额" type="number">
                                      <template slot="append">元</template>
                                    </el-input>
                                  </div>
                                </div>
                                <div class="mar_l20">
                                  <div>红包金额（立减）</div>
                                  <div class="cusipw">
                                    <el-input v-model="form.orReduce" :min="0.01" placeholder="请输入金额" type="number">
                                      <template slot="append">元</template>
                                    </el-input>
                                  </div>
                                </div>
                              </div>
                              <div class="flex">
                                <div class="mar_t30">最佳手气用户</div>
                                <div class="mar_l20">
                                  <div>使用门槛（订单满）</div>
                                  <div class="cusipw">
                                    <el-input v-model="form.opFullMoney" :min="0.01" placeholder="请输入金额" type="number">
                                      <template slot="append">元</template>
                                    </el-input>
                                  </div>
                                </div>
                                <div class="mar_l20">
                                  <div>红包金额（立减）</div>
                                  <div class="cusipw">
                                    <el-input v-model="form.opReduce" :min="0.01" placeholder="请输入金额" type="number">
                                      <template slot="append">元</template>
                                    </el-input>
                                  </div>
                                </div>
                              </div>
                            </div>
                        </el-form-item>
                      <el-form-item label="适用场景" :required="true" prop="useType">
                        <el-checkbox-group v-model="form.useType">
                          <el-checkbox label="1">外卖</el-checkbox>
                          <el-checkbox label="2">堂食</el-checkbox>
                          <el-checkbox label="3">快餐</el-checkbox>
                        </el-checkbox-group>
                      </el-form-item>
                      <el-form-item label="使用时间" :required="true" prop="useDay">
                        <div class="time_item flex">
                          <div class="mar_r10">领券后</div>
                          <el-input-number v-model="form.useDay" controls-position="right" :min="1" :max="1000000"></el-input-number>
                          <span class="mar_l10">日内有效</span>
                        </div>
<!--                        <div class="yb_margin lh16">默认从今日起，如需次日有效请勾选次日起选项</div>-->
                      </el-form-item>
                      <div class="shuju_title mar_b20">
                        <div class="shuju_title_text">
                          <span>活动规则</span>
                        </div>
                      </div>
<!--                      <el-form-item label="红包背景图片">-->
<!--                        <div class="uploadSource bor_de rel flex" v-if="form.icon">-->
<!--                          <label class="statusLabel curs" @mouseenter="enter(1)" @mouseleave="leave(1)">-->
<!--                            <i class="el-icon-check" ref="imgicon1"></i>-->
<!--                            <i class="el-icon-close" @click="deleteMultiImage(form.icon,1)"></i>-->
<!--                          </label>-->
<!--                          <img :src="form.icon" @click='test(1)' class="wid"/>-->
<!--                        </div>-->
<!--                        <div class="uploadSource flex-center curs" v-else @click='test(1)'>-->
<!--                          <i class="el-icon-plus fon_40 color_d9"></i>-->
<!--                        </div>-->
<!--                        <div class="yb_margin">背景图片建议尺寸：632*845<a class="mar_l20" @click="tishiImg()">查看示例</a></div>-->
<!--                      </el-form-item>-->
                      <el-form-item label="触发条件" :required="true" prop="payMoney" class="zuj">
                        <span class="mar_r10">支付金额达到</span>
                        <el-input-number v-model="form.payMoney" controls-position="right" :min="0.01" :max="1000000"></el-input-number>
                        <span class="mar_lr20">元（包含）触发红包</span>
                      </el-form-item>
                      <el-form-item label="最多可领取红包个数" :required="true" prop="receiveNum" class="zuj">
                        <el-input v-model="form.receiveNum" :min="1"  placeholder="请最多可领取红包个数" type="number">
                          <template slot="append">个</template>
                        </el-input>
                        <span class="mar_lr20">最佳手气第</span>
                        <el-input v-model="form.luck" :min="1" placeholder="请输入最佳手气第几位" type="number">
                          <template slot="append">位</template>
                        </el-input>
                      </el-form-item>
                      <el-form-item label="分享转发标题">
                        <el-input v-model="form.shareTitle" placeholder="请输入分享自定义标题内容"></el-input>
                      </el-form-item>
                      <el-form-item label="分享转发图片">
                        <div class="uploadSource bor_de rel flex" v-if="form.shareImg">
                          <label class="statusLabel curs" @mouseenter="enter(2)" @mouseleave="leave(2)">
                            <i class="el-icon-check" ref="imgicon2"></i>
                            <i class="el-icon-close" @click="deleteMultiImage(form.shareImg,2)"></i>
                          </label>
                          <img :src="form.shareImg" @click="test(2)" class="wid" />
                        </div>
                        <div class="uploadSource flex-center curs" v-else @click="test(2)">
                          <i class="el-icon-plus fon_40 color_d9"></i>
                        </div>
                        <!--                            <div class="yb_margin">建议尺寸：1920×1080</div>-->
                      </el-form-item>
                      <el-form-item label="活动规则说明">
                        <baidu-ueditor :content="form.details" @ueditor="getUeditor"></baidu-ueditor>
                      </el-form-item>
                    </el-form>
                </div>
                <el-dialog title="示例图片" :visible.sync="dialogTableVisible4" :close-on-click-modal='false' width="600px" class="tishidialog">
                    <div class="t_c">
                        <img src="../../../assets/img/channel/wincoubg.png" style="width: 200px;height: 300px;" class="mar_l20">
                    </div>
                </el-dialog>
            </div>
        </div>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button type="primary" @click="submitForm">立即创建</el-button>
        </div>
        <attachment-img ref="img1" type="img" @attachment='imgadd1'></attachment-img>
        <attachment-img ref="img2" type="img" @attachment='imgadd2'></attachment-img>
    </div>
</template>
<script>
    import {saveDividend,getSaveDividend} from "@/api/plug";
    import {changeDate} from "@/utils/index";
    import attachmentImg from "@/plugins/attachment-img";
    import baiduUeditor from '@/plugins/baidu-ueditor';


    export default {
        created() {
            if (this.$route.query.id) {
                this.id = this.$route.query.id
                this.edit()
            }
        },
        components: {attachmentImg,baiduUeditor},
        data() {
            return {
                form: {
                    name: '',
                    payMoney:'',
                    couponName:'',
                    orFullMoney:'',
                    orReduce:'',
                    opFullMoney:'',
                    opReduce:'',
                    useDay:'',
                    receiveNum:'',
                    luck:'',
                    useType: ['1'],
                    shareImg:'',
                    shareTitle:'',
                    details:'',
                },
                location: '1',
                coupon: [
                  {
                    fullMoney: '',
                    money: '',
                    num: ''
                  }
                ],
                fullMoney: '',
                money: '',
                num: '',
                comgrouping:[],
                timeData: [new Date(),new Date().setMonth(new Date().getMonth() + 3)],
                timeData2: [new Date(),new Date().setMonth(new Date().getMonth() + 3)],
                collapseName:'',
                dialogTableVisible4:false,
            }
        },
        methods: {
            async edit(){
                const {data} = await getSaveDividend({id: this.id})
                this.form2 = this.form
                this.form = Object.assign(this.form2, data);
                if(data.startTime){
                    this.timeData = [data.startTime,data.endTime]
                }
              if(data.couponStartAt){
                this.timeData2 = [data.couponStartAt,data.couponEndAt]
              }
            },
            enter(i=0){
                this.$refs['imgicon' + i].style.display = 'none'
            },
            leave(i=0){
                this.$refs['imgicon' + i].style.display = 'inline-block'
            },
            test(i = 0) {
                console.log(this.$refs, i)
                this.$refs['img' + i].dialogVisible = true
            },
            imgadd1(url) {
                this.form.icon = url.str
            },
            imgadd2(url) {
              this.form.shareImg = url.str
            },
            deleteMultiImage(item, index, type) {
                //typem没传是单图multigraph多图；index上传图片组件排序
                Array.prototype.remove = function (val) {
                    var index = this.indexOf(val);
                    if (index > -1) {
                        this.splice(index, 1);
                    }
                };
                if (type == 'multigraph') {
                    switch (index) {
                        case 2:
                            this.form2.environment.remove(item);
                            break
                    }
                } else {
                    switch (index) {
                        case 1:
                            this.form.icon = '';
                            break
                      case 2:
                        this.form.shareImg = '';
                        break
                    }
                }
            },
          getUeditor(content) {
            this.form.details = content;
          },
            tishiImg(){
                this.dialogTableVisible4 = true
            },
            async submitForm() {
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        if(this.timeData){
                            this.form.startTime  = changeDate(this.timeData[0]);
                            this.form.endTime = changeDate(this.timeData[1]);
                        }
                        if(this.timeData2){
                          this.form.couponStartAt  = changeDate(this.timeData2[0]);
                          this.form.couponEndAt = changeDate(this.timeData2[1]);
                        }
                        const {msg} = await saveDividend(this.form);
                        this.$baseMessage(msg, "success");
                        this.$router.push({path: 'dividend'})
                    } else {
                        return false;
                    }
                });
            },
        }
    }
</script>
<style lang="scss" scoped>
  .zuj{
  .el-form-item__content .el-input {
    max-width: 200px;
  }
  }
</style>
